<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <title>博客编辑</title>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/editormd.css"/>
    <script type="text/javascript" src="ui/jquery.min.js"></script>
    <script type="text/javascript" src="ui/jquery.serializejson.min.js"></script>
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
</head>
<body>
<div id="layout">
    <div class="btns">
        <button id="get-md-btn">保存文章</button>
        <span style="margin-left: 20px">上次保存时间：<span id="savetime" style="color: red">
            未保存
        </span></span>
    </div>
    <div id="test-editormd"></div>
</div>
<script src="js/Request.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/editormd.js"></script>
<script src="js/date.js"></script>
<script type="text/javascript">
    var testEditor;
    var id = Request().id;
    $(function () {
        var url = "json/test.md";
        if (!(undefined == id) && !(null == id)) {
            var url = "/admin/blog/getMd/" + id;
        }
        $.get(url, function (md) {
            testEditor = editormd("test-editormd", {
                width: "96%",
                height: 740,
                path: 'lib/',
                theme: "default",
                previewTheme: "default",
//                editorTheme : "paraiso-light",
                markdown: md,
                codeFold: true,
                //syncScrolling : false,
                saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
                searchReplace: true,
                //watch : false,                // 关闭实时预览
//                htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
                //toolbar  : false,             //关闭工具栏
                //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
                emoji: true,
                taskList: true,
                tocm: true,         // Using [TOCM]
                tex: true,                   // 开启科学公式TeX语言支持，默认关闭
                flowChart: true,             // 开启流程图支持，默认关闭
                sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
                //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
                //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
                dialogDraggable: false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
                //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
                //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "png"],
                imageUploadURL: "/admin/resouce/uploadRe?blogId=" + id,
                onload: function () {
                    console.log('onload', this);
                }
            });
        });

        //30s自动保存
        window.setInterval(autoSave, 30000);

        //窗口关闭自动保存
        window.onbeforeunload = autoSave;

        //定时保存
        function autoSave() {
            if (undefined == id || null == id) {
                alert("注意，正在自动保存，没有绑定博客ID上传后在博客页无法找到.");
                return;
            }

            $.ajax({
                url: '/admin/blog/saveHtml',
                data: {"md": testEditor.getMarkdown(), "id": id},
                type: "post",
                success: function (rtn) {
                    if (rtn.success) {
                        //显示时间
                        $("#savetime").text(new Date().Format("yyyy-MM-dd hh:mm:ss"));
                    } else {
                        alert("注意，自动保存失败，请检查");
                    }
                },
                error: function () {
                    alert("注意，自动保存失败，请检查");
                }
            });
        }


        $("#get-md-btn").bind('click', function () {
            if (undefined == id || null == id) {
                alert("注意，没有绑定博客ID上传后在博客页无法找到.");
                return;
            }

            var r = confirm("是否上传？");
            if (r) {
                $.ajax({
                    url: '/admin/blog/saveHtml',
                    data: {"md": testEditor.getMarkdown(), "id": id},
                    type: "post",
                    success: function (rtn) {
                        var r = confirm(rtn.message + ",是否退出？");
                        if (r) {
                            window.close();
                        }
                    }
                });
            }
        });

        $("#get-html-btn").bind('click', function () {
            $.messager.alert('提示', testEditor.getHTML(), "info");
        });

        $("#toc-menu-btn").click(function () {
            testEditor.config({
                tocDropdown: true,
                tocTitle: "目录 Table of Contents",
            });
        });

        $("#toc-default-btn").click(function () {
            testEditor.config("tocDropdown", false);
        });
    });
</script>
</body>
</html>